<template>
  <div id="app">
    <div id="Header">
      <Header></Header>
    </div>
    <div id="Goods">
      <Goods
        v-for="item in list"
        :key="item.id"
        :title="item.goods_name"
        :status="item.goods_state"
        :img="item.goods_img"
        :price="item.goods_price"
        :count="item.goods_count"
        :id="item.id"
        @statusChange="getNewState"
      >
        <template #Counter>
          <Counter
            :count="item.goods_count"
            @changeCount="addOrSub(item, $event)"
          ></Counter>
        </template>
      </Goods>
    </div>
    <div id="Footer">
      <Footer
        :fullStatus="fullStatus"
        :allM="allMoney"
        :allC="allCount"
        @fullChange="fullChange"
      ></Footer>
    </div>
  </div>
</template>

<script>
import Counter from '@/components/Counter.vue'
import axios from 'axios'
import Header from '@/components/Header.vue'
import Goods from '@/components/Goods.vue'
import Footer from '@/components/Footer.vue'
import bus from '@/components/bus.js'
export default {
  created() {
    this.initCartList()
    bus.$on('changeCount', (val) => {
      this.list.some((item) => {
        if (item.id == val.id) {
          item.goods_count = val.count
          if (item.goods_count == 0) {
            item.goods_state = false
          }
          return true
        }
      })
    })
    bus.$on('changeCount_1', (val) => {
      this.list.some((item) => {
        if (item.id == val.id) {
          item.goods_count = val.value
          return true
        }
      })
    })
  },
  data() {
    return {
      list: [],
    }
  },
  methods: {
    async initCartList() {
      const { data: res } = await axios.get('https://www.escook.cn/api/cart')
      console.log(res)
      if (res.status === 200) {
        this.list = res.list
      }
    },
    getNewState(e) {
      this.list.some((item) => {
        if (item.id === e.id) {
          item.goods_state = e.value
          return true
        }
      })
    },
    fullChange(value) {
      this.list.forEach((item) => (item.goods_state = value))
    },
    addOrSub(item, val) {
      item.goods_count = val
    },
  },
  computed: {
    fullStatus() {
      return this.list.every((item) => item.goods_state === true)
    },
    allMoney() {
      return this.list
        .filter((item) => item.goods_state)
        .reduce(
          (total, item) => (total += item.goods_price * item.goods_count),
          0
        )
    },
    allCount() {
      return this.list
        .filter((item) => item.goods_state)
        .reduce((total, item) => (total += item.goods_count), 0)
    },
  },
  components: {
    Header,
    Goods,
    Footer,
    Counter,
  },
}
</script>

<style lang="less">
body {
  margin: 0;
  padding: 0;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
  position: relative;

  #Header {
    z-index: 1;
    width: 100%;
    position: fixed;
  }

  #Goods {
    width: 100%;
    position: absolute;
    top: 2.5rem;
  }

  #Footer {
    width: 100%;
    position: fixed;
    bottom: 0;
  }
}
</style>
